<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
  /*@keyframes ro{
  0%{
    transform:rotateY(0deg);
  }
  90%{
    transform:rotateY(40deg);
  }
}
-webkit-keyframes ro{
   0%{
    transform:rotateY(0deg);
  }
  90%{
    transform:rotateY(40deg);
  }
}
-moz-keyframes ro{
   0%{
    transform:rotateY(0deg);
  }
  90%{
    transform:rotateY(40deg);
  }
}*/
body{
	background-color: black;
}
  #boxwrap{
  	width: 1000px;
  	height: 1200px;
  	border: 1px solid red;
  	background-color: black;
  	perspective:1000px;
-webkit-perspective: 1000px;
transform-style: preserve-3d;
  }
  #box{
  	width: 800px;
height: 600px;
border: 1px solid red;
background-color: blue;
transform-origin: left;
position: absolute;
box-shadow: 0 0 2px 2px white;
/*transform: rotateY(40deg);
animation: ro 5s ease;
-webkit-animation: ro 5s ease;*/
margin: 20px auto;
  }
	 </style>
    
</head>

<body>
	<div id="boxWrap">
		<div id="box"></div>
	</div>
</body>

<script type="text/javascript">
window.onload=function  () {
	// body...
	// alert('a');
	var oDiv=document.getElementById('box');
	oDiv.onmousemove=function(e){
		var e=e||window.event;
		var numX,numY,numx,numy,orignX,orignY;
		//alert(e);
		if(parseInt(e.pageX)<400 && parseInt(e.pageY)<255){  //1
			// alert('h');
			numX=Math.random()*20; 
			numY=-Math.random()*20;
			 numx=Math.random()*40; 
			numy=Math.random()*40;
			// orignX=10;
			// orignY=10;
			oDiv.style.transformOrigin="10% 10%";
		};

		if(parseInt(e.pageX)>400 && parseInt(e.pageY)<255){  //2
			// alert('h');
			numX=Math.random()*20; 
			numY=Math.random()*10;
			 numx=-Math.random()*200; 
			numy=Math.random()*200;
			// orignX=70;
			// orignY=20;
			oDiv.style.transformOrigin="70% 20%";
		};
		if(parseInt(e.pageX)<400 && parseInt(e.pageY)>255){  //3
			// alert('h');
			numX=-Math.random()*10; 
			numY=-Math.random()*30;
			 numx=Math.random()*40; 
			numy=-Math.random()*15;
			// orignX=10;
			// orignY=70;
			oDiv.style.transformOrigin="20% 70%";
		};
		if(parseInt(e.pageX)>400 && parseInt(e.pageY)>255){//4
			// alert('h');
			numX=-Math.random()*20; 
			numY=Math.random()*20;
			 numx=-Math.random()*50; 
			numy=-Math.random()*150;
			// orignX=70;
			// orignY=70;
			oDiv.style.transformOrigin="90% 90%";
		};
		oDiv.style.transform="translate3d("+numx+"px, "+numy+"px, 0px)"
		oDiv.style.transition="transform 0.5s";
		oDiv.style.transform='rotateY'+'('+numY+'deg'+')'+'rotateX'+'('+numX+'deg'+')';
		// oDiv.style.transformOrigin=orignX+'%'+' '+orignX+'%';
		// alert(orignX+'%'+' '+orignX+'%');
	}
}
</script>
</html>